<template>
  <ContentWrap title="待办事项">
    <el-row>
      <el-col
        v-for="item in data"
        :key="item.name"
        :xs="12"
        :sm="12"
        :md="6"
        :lg="6"
        :xl="6"
        class="mb-10px"
      >
        <div
          class="flex flex-col h-90px cursor-pointer items-center justify-center gap-2 meton-num-font-family"
          @click="handleClick(item.routerName)"
        >
          <div class="h-48px flex items-center justify-center rounded">
            <CountTo
              :decimals="item.decimals"
              :end-val="item.value"
              :prefix="item.prefix"
              class="text-3xl"
            />
          </div>

          <span class="text-center">{{ item.name }}</span>
        </div>
      </el-col>
    </el-row>
  </ContentWrap>
</template>
<script lang="ts" setup>
import * as ProductSpuApi from '@/api/mall/product/spu'
import * as TradeStatisticsApi from '@/api/mall/statistics/trade'
import * as PayStatisticsApi from '@/api/mall/statistics/pay'

/** 运营数据卡片 */
defineOptions({ name: 'OperationDataCard' })

const router = useRouter() // 路由

/** 数据 */
const data = reactive({
  orderUndelivered: { name: '待发货订单', value: 9, routerName: 'TradeOrder' },
  orderAfterSaleApply: { name: '待处理售后', value: 4, routerName: 'TradeAfterSale' },

  orderWaitePickUp: { name: '待核销订单', value: 0, routerName: 'TradeOrder' },
  productAlertStock: { name: '售罄商品', value: 0, routerName: 'ProductSpu' },

  withdrawAuditing: { name: '待审核账单', value: 0, routerName: 'TradeBrokerageWithdraw' },
  productForSale: { name: '近期生日会员', value: 0, routerName: 'ProductSpu' },

  productInWarehouse: { name: '余卡不足会员', value: 0, routerName: 'ProductSpu' },
  rechargePrice: {
    name: '待发放佣金',
    value: 0.0,
    prefix: '￥',
    decimals: 2,
    routerName: 'PayWalletRecharge'
  }
})

/** 查询订单数据 */
const getOrderData = async () => {
  const orderCount = await TradeStatisticsApi.getOrderCount()
  if (orderCount.undelivered != null) {
    data.orderUndelivered.value = orderCount.undelivered
  }
  if (orderCount.afterSaleApply != null) {
    data.orderAfterSaleApply.value = orderCount.afterSaleApply
  }
  if (orderCount.pickUp != null) {
    data.orderWaitePickUp.value = orderCount.pickUp
  }
  if (orderCount.auditingWithdraw != null) {
    data.withdrawAuditing.value = orderCount.auditingWithdraw
  }
}

/** 查询商品数据 */
const getProductData = async () => {
  // TODO: @芋艿：这个接口的返回值，是不是用命名字段更好些？
  const productCount = await ProductSpuApi.getTabsCount()
  data.productForSale.value = productCount['0']
  data.productInWarehouse.value = productCount['1']
  data.productAlertStock.value = productCount['3']
}

/** 查询钱包充值数据 */
const getWalletRechargeData = async () => {
  const paySummary = await PayStatisticsApi.getWalletRechargePrice()
  data.rechargePrice.value = paySummary.rechargePrice
}

/**
 * 跳转到对应页面
 *
 * @param routerName 路由页面组件的名称
 */
const handleClick = (routerName: string) => {
  router.push({ name: routerName })
}

/** 激活时 */
onActivated(() => {
  getOrderData()
  getProductData()
  getWalletRechargeData()
})

/** 初始化 **/
onMounted(() => {
  getOrderData()
  getProductData()
  getWalletRechargeData()
})
</script>
